<template>
    <div class="flex">
        <div class="left flex-1 mg-r-20">
            <channelGroup @channelId="handleChannelId" @refresh="handleRefresh"/>
        </div>
        <div class="right flex-4">
            <channelTable ref="channelTableRef" :channel-id="channelId"/>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import channelGroup from './components/channelGroup/index.vue'
import channelTable from './components/channelTable/index.vue'
const channelId = ref('')
const channelTableRef = ref(null)
const handleChannelId = (id) => {
    channelId.value = id
}
const handleRefresh = () => {
    channelTableRef.value.getList()
}
</script>
<style lang="scss" scoped>
.left {
    min-width: 250px;
}
</style>